<template>
    <div class="chart-card">
        <h3>商品前十排行榜</h3>
        <div class="chart-wrapper">
            <el-skeleton v-if="loading" :rows="10" animated style="height: 420px;" />
            <v-chart v-else class="chart" :option="chartOption" :autoresize="false" ref="chart" />
        </div>
    </div>
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { getGoodsTop10 } from '@/api/admin/active'

use([
    CanvasRenderer,
    BarChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent
])

export default {
    name: 'ProductRankingChart',
    components: { VChart },
    data() {
        return {
            loading: true,
            chartOption: {
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b} : {c} 次',
                    axisPointer: { type: 'shadow' }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    name: '访问量',
                    nameTextStyle: { color: '#64748b' }
                },
                yAxis: {
                    type: 'category',
                    data: [],
                    axisLabel: {
                        width: 120,
                        overflow: 'truncate',
                        color: '#64748b'
                    },
                    inverse: true
                },
                series: [{
                    name: '访问量',
                    type: 'bar',
                    data: [],
                    itemStyle: { color: '#409EFF' },
                    label: {
                        show: true,
                        position: 'right',
                        color: '#1e293b'
                    }
                }]
            }
        }
    },
    methods: {
        async fetchData() {
            this.loading = true
            try {
                const productData = await getGoodsTop10()

                // 直接更新图表数据
                this.chartOption.yAxis.data = productData.data.data.map(item => item.goodsId)
                this.chartOption.series[0].data = productData.data.data.map(item => item.userId)

                // 手动调整图表大小
                this.$nextTick(() => {
                    this.resizeChart()
                })
            } catch (error) {
                console.error('获取商品排行榜数据失败:', error)
                this.$message.error('获取商品排行榜数据失败')
            } finally {
                this.loading = false
            }
        },
        resizeChart() {
            try {
                if (this.$refs.chart) {
                    this.$refs.chart.resize()
                }
            } catch (error) {
                console.warn('商品排行榜图表调整大小警告:', error.message)
            }
        }
    },
    mounted() {
        this.fetchData()
        // 添加窗口大小变化监听器
        window.addEventListener('resize', this.handleResize)
    },
    beforeDestroy() {
        // 清理事件监听器
        window.removeEventListener('resize', this.handleResize)
        if (this.resizeTimer) {
            clearTimeout(this.resizeTimer)
        }
    },
    methods: {
        async fetchData() {
            this.loading = true
            try {
                const productData = await getGoodsTop10()

                // 直接更新图表数据
                this.chartOption.yAxis.data = productData.data.data.map(item => item.goodsId)
                this.chartOption.series[0].data = productData.data.data.map(item => item.userId)

                // 手动调整图表大小
                this.$nextTick(() => {
                    this.resizeChart()
                })
            } catch (error) {
                console.error('获取商品排行榜数据失败:', error)
                this.$message.error('获取商品排行榜数据失败')
            } finally {
                this.loading = false
            }
        },
        resizeChart() {
            try {
                if (this.$refs.chart) {
                    this.$refs.chart.resize()
                }
            } catch (error) {
                console.warn('商品排行榜图表调整大小警告:', error.message)
            }
        },
        handleResize() {
            // 防抖处理窗口大小变化
            clearTimeout(this.resizeTimer)
            this.resizeTimer = setTimeout(() => {
                this.resizeChart()
            }, 100)
        }
    }
}
</script>

<style scoped>
.chart-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(99, 102, 241, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.chart-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #ec4899);
    opacity: 0.7;
}

.chart-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.chart-card h3 {
    margin-bottom: 16px;
    padding-left: 12px;
    border-left: 3px solid #6366f1;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(135deg, #1e293b, #475569);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.chart-wrapper {
    width: 100%;
    height: 400px;
    min-height: 300px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.chart {
    width: 100%;
    height: 100%;
    border-radius: 6px;
}
</style>
